<template>
  <div>
    <el-button type="primary" plain @click="openBgcAddOrEdit">新增分类</el-button>

    <div class="content">
      <el-table v-loading="loading" :data="classificationData" tooltip-effect="dark" stripe ref="TableSelected">
        <el-table-column prop="name" align="center" min-width="150" label="分类"></el-table-column>
        <el-table-column prop="parent.name" align="center" min-width="150" label="父级分类"></el-table-column>
        <el-table-column min-width="180" prop="platformCount" align="center" label="内容源数量">
        </el-table-column>
        <el-table-column align="center" min-width="150" label="背景图">
          <template slot-scope="props">
            <el-button size="mini" @click="watchMore(props.row.id)">点击查看</el-button>
          </template>
        </el-table-column>

        <el-table-column align="center" min-width="150">
          <template slot-scope="props">
            <el-button size="mini" @click="openBgcAddOrEdit(props.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination class="pageNation" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 15, 30, 50]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 新增 / 编辑 -->
    <el-dialog :visible.sync="openAdd" :close-on-click-modal="false" width="60%">
      <el-form class="demo-form-inline">
        <el-form-item label="分类名称" required>
          <el-input placeholder="分类名称" v-model="name" clearable></el-input>
        </el-form-item>

        <el-form-item label="内容源背景图">
          <el-upload class="upload-demo" :limit="1" :action="uploadUrl" :on-success="handleAvatarSuccess"
            :on-remove="handleRemove" :file-list="fileList" list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="层父级分类（非必填）">
          <el-select v-model="pcode" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in categoryLv1" :key="index" :value="item.code" :label="item.name">
              {{ item.name }}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button style="margin-left:50%;" @click="addOrEdit">保存</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <!-- 点击查看 背景图-->
    <el-dialog :visible.sync="openBgc" :close-on-click-modal="false" width="30%">
      <img :src="imgUrl" alt="" style="width: 80%;height: 80%;">
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "classificationManagement",
    data() {
      return {
        classificationData: [],
        categoryLv1: [],
        loading: false,
        openBgc: false,
        openAdd: false,
        imgUrl: "",

        // 新增数据
        name: "",
        pcode: "",
        file: "",

        fileList: [],
        addOreEditData: {},
        uploadUrl: '',

        //分页对象参数
        pageNo: 1,
        pageSize: 10,
        total: 1,
        currentPage: 1
      };
    },

    mounted() {
      this.uploadUrl = `${this.$defaults.baseURL}/upload`;
      this.getLists();
      this.getCategoryLv1();
    },

    methods: {
      // 上传图片
      // 删除图片
      handleRemove(file, fileList) {
        this.file = '';
        // console.log(file, fileList);
      },
      // 上传成功
      handleAvatarSuccess(res, file) {
        this.file = file.response.resultParm.resource;
        this.$message.success('上传成功');
        console.log(file, '45354');
      },

      // 获取tableList
      getLists() {
        let conf = {
          url: "/platformCategorys",
          method: "get",
          params: {
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        };
        this.$axios(conf).then(res => {
          if (res.responseCode === 200) {
            this.classificationData = res.resultParm.resource.list;

            this.pageSize = res.resultParm.resource.pageSize;
            var num = res.resultParm.resource.total;
            this.total = parseInt(num);
          } else {
            this.$message.error("操作失败：" + res.message);
          }
        });
      },

      //查询一级分类
      getCategoryLv1(id) {
        let conf = {
          url: "/platformcategoryLv1",
          method: "get",
          params: {}
        };
        this.$axios(conf).then(res => {
          if (res.responseCode === 200) {
            this.categoryLv1 = res.resultParm.resource;
          } else {
            this.$message.error("操作失败：" + res.message);
          }
        });
      },

      openBgcAddOrEdit(row) {
        this.openAdd = true;

        if (row) {
          this.addOreEditData = row;

          // 初始化数据
          this.name = row.name;
          // this.pcode = row.code;
        }
      },

      // 编辑或者新增
      addOrEdit() {
        var data = {
          name: this.name,
        }

        if (this.file) {
          data.icon = this.file;
        }

        if (this.pcode) {
          data.pcode = this.pcode;
        }

        if (this.addOreEditData.id) {
          data.id = this.addOreEditData.id;
        }

        let conf = {
          url: "/platformcategory",
          method: "post",
          data: data
        };
        this.$axios(conf).then(res => {
          if (res.responseCode === 200) {
            this.$message.success('操作成功');
            this.openAdd = false;
            this.getLists();
          } else {
            this.$message.error("操作失败：" + res.message);
          }
        });
      },

      // 点击查看
      watchMore(id) {
        this.openBgc = true;

        let conf = {
          url: "platformCategory",
          method: "get",
          params: {
            id: id
          }
        };
        this.$axios(conf).then(res => {
          if (res.responseCode === 200) {
            var key = res.resultParm.resource.icon,
              pointURL = "/icon";

            // console.log(this.$defaults.baseURL , key, '8888');
            this.imgUrl = this.$defaults.baseURL + pointURL + "?icon=" + key;
          } else {
            this.$message.error("操作失败：" + res.message);
          }
        });
      },

      handleSizeChange(val) {
        this.pageSize = val;
        this.getLists();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.getLists();
      }
    }
  };

</script>

<style lang="scss">
  .content {
    margin-top: 50px;
  }

</style>
